<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>自定义指令</h2>
      <!-- <input type="text" ref="ipt" /> -->

      <input type="text" v-focus />

      <div v-demo:style.red="50">123</div>
      <div v-demo:style.green="100">456</div>
    </div>

    <script src="./vue.js"></script>
    <script>
      Vue.createApp({
        data() {
          return {};
        },

        // directives里面编写自定义指令
        directives: {
          focus: {
            mounted(el) {
              el.focus();
            },
          },
          demo: {
            // 在绑定元素的 attribute 前
            // 或事件监听器应用前调用
            created(el, binding, vnode, prevVnode) {
              // 下面会介绍各个参数的细节
            },
            // 在元素被插入到 DOM 前调用
            beforeMount(el, binding, vnode, prevVnode) {},
            // 在绑定元素的父组件
            // 及他自己的所有子节点都挂载完成后调用
            mounted(el, binding, vnode, prevVnode) {
              console.log(el);
              console.log(binding);

              const { arg, modifiers, value } = binding;
              // modifiers {red: true}
              el[arg].color = Object.keys(modifiers);
              el[arg].fontSize = value + "px";
            },
            // 绑定元素的父组件更新前调用
            beforeUpdate(el, binding, vnode, prevVnode) {},
            // 在绑定元素的父组件
            // 及他自己的所有子节点都更新后调用
            updated(el, binding, vnode, prevVnode) {},
            // 绑定元素的父组件卸载前调用
            beforeUnmount(el, binding, vnode, prevVnode) {},
            // 绑定元素的父组件卸载后调用
            unmounted(el, binding, vnode, prevVnode) {},
          },
        },

        // mounted() {
        //   this.$refs.ipt.focus();
        // },
      }).mount("#app");
    </script>
  </body>
</html>
